<template>
    <div class="item" v-for="item in 3">
        <h3>第{{ item }}行的子子组件 - {{ data }} - {{ count }}<button @click="clickBtn">点击</button></h3>
    </div>
</template>

<script setup lang="ts">
import { inject,provide} from 'vue';
//通过inject从上层提供方匹配注入到当前组件的数据名称（订阅者）

const data = inject("parentData")
const count = inject("count")
const method = inject<any>("changeCount")
function clickBtn(){
    method()
}

//子子后代组件给上层组件发布数据
provide("itemData","子子组件item的数据")
</script>

<style lang="less" scoped>

.item{
    width: 100%;
    height: 30px;
    background-color: orange;
    line-height: 30px;
    margin: 20px auto;
}
</style>